<script setup lang="ts">
interface IProp {
  size?: string | number
}

withDefaults(defineProps<IProp>(), {
  size: 40
})
</script>

<template>
  <div class="icon-wrapper" :style="{ width: size + 'px', height: size + 'px' }">
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main-gray-bg-color-2);
  margin-left: 10px;
  cursor: pointer;
  &:hover {
    background-color: var(--main-gray-hover-bg-color-2);
  }
}
</style>
